<template>
  <div class="main-content">
    <!-- <div class="logo-container">
      <img src="@/static/logo.png" alt="Logo" class="logo" />
    </div> -->
    <div class="search">
      <br />
      <div class="search-header">
        <div class="summary-item">
          全站镜像索引数量：<span>{{ totalImages }}</span>
        </div>
        <div class="summary-item">
          同步：<span>{{ totalSize }} GB</span>
        </div>
      </div>
      <div class="search-bar">
        <el-form :model="searchForm" :rules="rules" ref="searchForm">
          <el-form-item prop="search">
            <el-input
              placeholder="镜像名称 nginx 支持模糊搜索"
              v-model="searchForm.search"
              class="search-input"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="validateSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- <el-tag-group>
          <el-tag v-for="tag in tags" :key="tag.name" type="info" effect="dark">{{ tag.name }}</el-tag>
        </el-tag-group> -->
    <el-card class="prompt">
      <p style="font-size: 20px">
        欢迎大家使用云原生运维圈镜像站,本站目前支持同步镜像源: gcr.io ghcr.io
        quay.io k8s.gcr.io docker.io registry.k8s.io docker.elastic.co
        单个镜像大小限制1G 等待同步镜像数量:1
      </p>
    </el-card>
    <el-row :gutter="20" class="image-grid">
      <el-col :span="6" v-for="image in images" :key="image.name">
        <el-card class="image-card">
          <img :src="getImageSrc(image.name)" alt="Image Logo" />
          <div slot="header" class="clearfix">
            <!-- <p>{{ image.name }}</p> -->
            <!-- <el-button type="primary" @click="Search(`${image.name}`)">{{
              image.name
            }}</el-button> -->
            <router-link :to="{ path: `/search/${image.name}` }">{{
              image.name
            }}</router-link>
            <p>
              镜像数量:
              <el-tag :key="image.count" type="success">
                {{ image.count }}
              </el-tag>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  created() {
    this.getrepoList()
  },
  data() {
    return {
      searchForm: {
        search: ''
      },
      rules: {
        search: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }]
      },
      totalImages: 2594,
      totalSize: 475,
      tags: [],
      images: []
    }
  },
  methods: {
    getImageSrc(name) {
      switch (name) {
        case 'gcr.io':
          return require('@/static/github.png')
        case 'ghcr.io':
          return require('@/static/github.png')
        case 'quay.io':
          return require('@/static/redhat.png')
        case 'k8s.gcr.io':
          return require('@/static/k8s.png')
        case 'docker.io':
          return require('@/static/docker.png')
        case 'registry.k8s.io':
          return require('@/static/k8s.png')
        case 'docker.elastic.co':
          return require('@/static/elastic.png')
        default:
          return require('@/static/docker.png') // 默认图片
      }
    },
    validateSearch() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.Search(this.searchForm.search)
        } else {
          console.log('搜索验证失败')
          return false
        }
      })
    },
    Search(search) {
      this.$router.push({ path: `/search/${search}` })
    },
    handleSearch() {
      console.log('Searching for:', this.search)
      // 实现搜索逻辑
    },
    async getrepoList() {
      const { data: response } = await this.$http.get('image/repo_counts/')
      if (response.code) {
        return this.$message.error(response.message)
      }
      this.images = response.data
    }
  }
}
</script>

<style scoped>
.add-button {
  margin-right: 20px;
}
.el-form {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.search-header {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.search-input {
  width: 300px;
  margin-right: 10px;
}
.summary {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.summary-item {
  font-size: 18px;
  font-weight: bold;
}
.image-grid {
  margin-top: 20px;
  margin-bottom: 20px;
}
.image-card {
  margin-bottom: 20px;
}
.image-card img {
  height: 120px;
}
.prompt {
  margin-top: 20px;
  text-align: left;
}
.search {
  min-height: 100px;
}
a {
  color: #3b71ca;
}
.router-link {
  font-size: 1.25rem;
}
.main-content {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  min-height: 900px;
  /* line-height: 160px; */
  margin-top: 60px;
  margin: 0 auto;
  width: 80%; /* Adjust the width as needed */
}
.logo-container {
  text-align: center;
  margin-bottom: 20px;
}
.logo {
  height: 100px;
}
</style>
